<template>
    <div class="changePass">
      <div class="title">修改密码</div>
      <form
        action="#"
      >
        <div class="oldPassword">
          <div>
            <label for="oldPassword"><span>原密码:</span></label>
            <input
              type="password"
              placeholder="请输入原密码"
              id="oldPassword"
              name="oldPassword"
              v-validate ="{required : true ,oldPassword : getPassword}"
              v-model="user.oldPassword"
            >
          </div>
          <span
            class="error-info error-username"
            v-show="errors.has('oldPassword')"
          >
          {{ errors.first("oldPassword") }}
        </span>
        </div>
        <div class="newPassword">
          <div><label for="newPassword"><span>新密码:</span></label>
            <input
              type="password"
              placeholder="请输入原密码"
              id="newPassword"
              name="newPassword"
              v-validate ="'required|newPassword'"
              v-model="user.newPassword"
            ></div>
          <span
            class="error-info error-username"
            v-show="errors.has('newPassword')"
          >
          {{ errors.first("newPassword") }}
        </span>
        </div>
        <div class="confirm-password">
          <div>
            <label for="confirmPassword"><span>确认密码:</span></label>
            <input
              type="password"
              placeholder="确认新密码"
              id="confirmPassword"
              name="confirmPassword"
              v-validate ="{required : true ,confirmPassword : user.newPassword}"
              v-model="user.confirmPassword"
            >
          </div>
          <span
            class="error-info error-confirm-password"
            v-show="errors.has('confirmPassword')"
          >
          {{ errors.first("confirmPassword") }}
        </span>
        </div>
        <a href="resetPassword.html">忘记密码？</a>
        <button type="button" @click="submit">保存修改</button>
      </form>
    </div>
</template>

<script>
  // <!-- 还有引入validatir -->
  import { Validator } from 'vee-validate';
  // 修改默认
  const dictionary = {
    zh_CN: {
      messages: {
        required: () => '该值不能为空哦'
      }
    }
  };
  Validator.updateDictionary(dictionary);
  // oldPassword
 Validator.extend('oldPassword', {
    messages: {
      zh_CN:field => '密码输入错误'
    },
    validate: (value, args) => {
      return args[0](value);
    }
  });
  // newPassword
  Validator.extend('newPassword', {
    messages: {
      zh_CN:field => '请输入8至11位的中、英文字符'
    },
    validate: value => {
      return /^.[0-9A-Za-z]{7,10}$/.test(value);
    }
  });
  // confirmPassword
  Validator.extend('confirmPassword', {
    messages: {
      zh_CN:field => '密码不一致'
    },
    validate: (value, args) => {
      return args == value;
    }
  });

  export default {
    name: 'changePass',
    props: {},
    data () {
      return {
        user : {
          oldPassword : '',
          newPassword : '',
          confirmPassword : ''
        }
      }
    },
    methods : {
      submit : function () {
        let that = this;
        this.$validator.validateAll().then((result)=>{
          // 这里默认成功  成功之后跳到Login  that.$emit('switch')
          if(!result){
            that.$emit('switch','login')
          }
        })
      },
      // 该方法用于获取原来的密码
      getPassword : function (arg1) {
        // 这里是获得的password
        let password = 'nzq';
        if(arg1 == password) {
          return true
        }else {
          return false;
        }
      }
    },
    mounted () {

    },
  }
</script>

<style scoped>
@import '../../../../../assets/css/loginRegister.css';
  .changePass {
    width: 600px;
    margin: 30px 50px;
  }

  .changePass .title {
    height: 60px;
    font: 22px/60px "Microsoft YaHei",sans-serif;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .changePass  form>div {
    height: 60px;
  }
  .changePass  form label {
    width: 15%;
    text-align: center;
    padding: 0;
  }
.changePass  form>div input {
  width: 70%;
}

  .changePass form button {
    width: 100px;
    height: 40px;
    background-color: #0986ff;
    font-weight: normal;
    color: white;
    font-family: "Microsoft YaHei",sans-serif;
    float: right;
    margin-right: 50px;
  }

  .changePass form button:hover{
    background-color: #097bea;
  }

  .changePass form>a {
    color: #068bff;
    width: fit-content;
    float: left;
    margin-top: 40px;
  }
  .changePass form>a:hover {
    cursor: pointer;
    color: #0570ce;
  }
</style>
